<template>

    <div class="font-14px box-sizing bg-img-fc" style="height: calc(100vh - 60px) ; padding-top: 10px ;" >
      <v2-main class="bg-f6">
        <el-container>
          <el-aside width="200px"  style="height: calc(100vh - 90px);overflow: auto">
            <div class="aside-title"></div>
            <div class="el-menu-item" @click="updateType(0)">
              <i class="el-icon-folder-add"></i>
              <span>新建分类</span>
            </div>
            <el-menu :default-active="bookActiveIndex" class="cfy-menu">
              <el-menu-item class="sider-nav-item list-item"
                            :index="index + '' "
                            v-for="(item , index) in dirList"  @click="open(index)">
                <span>{{item.dirName}}</span>
                <i class="el-icon-more font-20px" @click="updateType(1,index)"></i>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-container style="height: calc(100vh - 90px);overflow: auto">
            <el-main style="padding: 0 ;" >
              <v2-header :height="44" >
                <template #right>
                  <div style="width:300px">
                    <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" size="mini">
                      <template #append>
                        <el-button  icon="el-icon-search" @click="search(keyword)" ></el-button>
                      </template>
                    </el-input>
                  </div>
                  <el-button size="mini"  type="success" class="mar-rl-10px c-btn" @click.stop="updateBook(0)" >添加</el-button>
                </template>
              </v2-header>
              <!--  note_classify 笔记的分类 -->
              <el-scrollbar style="height: calc(100vh - 134px)" >
              <el-row  class=" pd-20px ">
                <el-col
                    class="pd-10px"
                    v-for="(item,index) in bookList"
                    :key="item.id"
                    :span="6"  @click.native="toContent(item)">
                  <div class="grid-content bg-purple pd-10px pointer bg-f">
                    <div class="cover ">
                      <img :src="getCover(item.cover)" class="wh-full">
                    </div>
                    <div class="list-item mar-tb-20px">
                      <span class="title">{{item.bookName}}</span>
                      <i class="el-icon-more font-20px" style="color:#909399" @click.stop="updateBook(1, index)"></i>
                    </div>
                  </div>
                </el-col>
                <el-empty description="没有任何内容，赶紧添加吧" v-if="bookList.length === 0">
                  <el-button size="small" @click.n.native="updateBook(0)">添加笔记</el-button>
                </el-empty>
              </el-row>
              </el-scrollbar>
            </el-main>
          </el-container>
        </el-container>
      </v2-main>

      <dialogForm :fields="typeFormData" v-model="typeShow" @submit="typeSubmit" pos="top" :title="typeTitle" :form-data="currTypeData"></dialogForm>
      <dialogForm :fields="courseFormData" v-model="bookShow" @submit="bookSubmit" pos="top" :title="courseTitle" :form-data="currBookData"></dialogForm>
    </div>

</template>
<script>
import dialogForm from "@/components/v2-form/dialogForm";
import Constants from '@/Constants'
import v2Main from "@/components/v2-cps/v2-main";
import v2Header from "@/components/v2-cps/v2-header";
import dir from "@/api/learn/dir"
import books from "api/learn/books" ;
import ApiResponse from "utils/ApiResponse";
import util from "utils/util";
import Service from "api/Service";
import {mapGetters} from "vuex";
export default {
  name: 'index',
  components:{
    v2Main ,
    dialogForm,
    v2Header
  } ,
  data(){
    return {
      currentIndex: 0,
      typeTitle: '' ,
      courseTitle: '' ,
      courseTypeList:[],
      currentCourses:[],
      courseTypeTotal: 0,
      keyword: '' ,
      typeShow: false ,
      typeFormData: [
        {
          key: 'dirName' ,
          title: "分类名称",
          required: true
        },
        {
          key: 'sort' ,
          title: "排序",
          is: 'number'
        },
        {
          key: 'desc' ,
          title: "描述",
          attrs:{
            type: 'textarea'
          }
        }
      ],
      bookShow: false ,
      currTypeData: {} ,
      currBookData: {} ,
      courseState: 0 ,
      dirList:[] ,
      currentPage: 1 ,
      pageSize: 100 ,
      booksParams:{bookName: ''},
      bookList: []
    }
  },
  mounted(){
    this.getDirList() ;
  },
  methods:{
    getDirList(){
      dir.getList(1, 100,{}).then(res=>{
        let response = new ApiResponse(res);
        response.ok((data)=>{
          this.dirList = data.rows;
          this.currentIndex = 0 ;
          this.search()
        })
      })
    },
    getBooks(){
      books.getList(this.currentPage , this.pageSize , this.booksParams).then(res=>{
        let response = new ApiResponse(res);
        response.ok((data)=>{
          this.bookList = data.rows;
        })
      })
    } ,
    updateBook(state , index){
      this.bookShow = true ;
      this.courseTitle = state === 0 ? '添加新课程': "更新课程" ;
      let dirId  = this.dirList[this.currentIndex] ? this.dirList[this.currentIndex].id : ''
      this.currBookData = state === 0 ? {
        dirId : dirId
      } : this.bookList[index] ;
    },
    toCourse(item){
      this.$store.commit(Constants.setCourseId, item.courseId)
      this.$router.push("/course") ;
    },
    open(index){
      this.currentIndex = index
      this.$store.commit(Constants.bookActiveIndex ,index.toString()) ;
      this.search("")
    },
    search(val){
      let dir = this.getActiveDir() ;
      if(!util.isEmpty(dir)){
        this.booksParams.bookName = val ;
        this.booksParams.dirId = dir.id ;
        this.getBooks() ;
      }
    },
    toContent(item){
      this.$store.commit(Constants.setBook, item)
      this.$router.push('/v2/content')
    },
    typeSubmit(data){
      dir.update(data).then(res=>{
        let response = new ApiResponse(res) ;
        response.ok((data)=>{
          this.getDirList() ;
        }).print()
      })

    },
    bookSubmit(data){
      books.update(data).then(res=>{
       let response = new ApiResponse(res);
        response.ok(()=>{
          this.bookDialogChang() ;
          this.search()
          this.bookShow = false ;
        }).print()
      })
    },
    updateType(state , index){
      this.typeTitle = state === 0 ? "新建分类":'更新分类';
      this.typeShow = true ;
      this.currTypeData = state === 0 ? {} : this.dirList[index] ;
    },
    getCover(cover){
      if(util.isEmpty(cover)){
        return "/imgs/kj.jpg"
      }
      return cover
    },
    bookDialogChang(){
      this.bookShow = !this.bookShow ;
    },
    getActiveDir(){
      return this.dirList[parseInt(this.bookActiveIndex)]
    }
  },
  computed:{
    bookActiveIndex(){
      let index = this.$store.state.learn.bookActiveIndex ;
      this.currentIndex = parseInt(index)
      return index
    } ,
    courseFormData(){
      return [
        {
          key: 'dirId',

          title: '课程类别',
          span: 24 ,
          required: true ,
          is: 'select' ,
          attrs:{
            config:{
              options: this.dirList,
              map:{
                label: 'dirName' ,
                value: 'id'
              }
            }
          },
        },
        {
          key: 'bookName' ,
          span: 24 ,
          title: '书本名称',
          required: true ,
        },
        {
          key: 'cover' ,
          title: '书本封面',
          span: 24 ,
          required: false ,
        },
        {
          key: 'sort' ,
          title: '排序',
          span: 24 ,
          required: false ,
          is:"number"
        },
        {
          key: 'desc' ,
          title: '书本描述',
          span: 24 ,
          attrs:{
            type: 'textarea'
          }
        },
      ]
    }
  },
  watch:{
  }
}
</script>

<style>
.cover{
  text-align: center;
  height: 119px;
}

.grid-content{
  box-shadow: 0 0 5px #00000024;
}
.cfy-menu .el-menu-item{
  height: 44px;
  line-height: 44px;
}
.el-aside{
  border-right: 1px solid #ddd;
}
.cfy-menu .el-menu-item.is-active{
  background-color: #409eff;
  color: #fff;
}
.cfy-menu{border-right: none !important;}
.aside-title{
  height: 44px;
  border-bottom: 1px solid #eee;
}

.cfy-menu .el-menu-item.is-active .el-icon-more{
  color: #fff;
}
.c-btn{
  padding: 6px 16px;
  margin: 0 10px;
}
.el-menu{
  background-color: rgba(0,0,0,0);
}
</style>
